<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <link href="../../css/normalize.css" rel="stylesheet">
    <link href="../../css/reset.css" rel="stylesheet">
    <link href="../../js/element.min.css" rel="stylesheet">
    <link href="../../js/elementUI-2.6.2/theme-chalk/index.css" rel="stylesheet">
    <script src="../../js/jquery-3.6.js"></script>
    <script src="../../js/vue.js"></script>
    <script src="../../js/elementUI-2.6.2/index.js"></script>
    <script src="../../js/element.min.js"></script>


</head>
<body>
<div id="root" class="root">
    <!--左侧-->
    <div id="left" class="left">
        aaa
    </div>
    <!--右侧-->
    <div id="right" class="right">
        <nav class="nav">aa</nav>
        <main class="main">

        </main>
        <footer class="footer"><i>网备</i></footer>
    </div>
</div>
</body>
<style>
    html body{
        font-size: 12px;
        /*border: #3a8ee6 1vw solid;*/
    }
    .root{
        display: flex;
        flex-direction: row;
    }
     .left{
        background-color: rgba(242,245,248,1);
         min-width: 350px;
         max-width: 350px;
         height: 51vw;
         border-right: rgba(210,220,224,1);
    }
     .right{
        /*background-color: yellow;*/
         height: 51vw;
         flex-grow: 1;
    }
     .right .nav{
         height: 50px;
         background-color: rgba(0,150,220,0.7);
     }
     .right .main{
         background-color: rgba(242,245,248,1);
         height: 880px;
         margin-left: 5px;
         margin-right: 5px;
         margin-top: 5px;
         overflow: auto;
     }
     .right .footer{
         background-color: rgba(240,240,240,1);;
         height: 30px;
         margin-left: 5px;
         margin-right: 5px;
         margin-top: 10px;
         text-align: center;
     }
</style>
<script type="text/javascript">

    let vm = new Vue({
        el: "#root",
        data() {
            return {}
        },
        methods: {}
    });
</script>
</html>